<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import {imageListApi, type imageType} from "@/api/image_api";
import type {columnType} from "@/components/admin/f_list.vue";
import F_avatar_title from "@/components/common/f_avatar_title.vue";
import {logLevelOptions} from "@/options";
import {reactive, ref} from "vue";
import {bytesToSize} from "@/utils/file";
import {userStorei} from "@/stores/user_store";
import type {baseResponse} from "@/api";
import type {FileItem} from "@arco-design/web-vue";
import {Message} from "@arco-design/web-vue";

const store = userStorei()
const columns: columnType[] = [
  {title: "图片名称", dataIndex: 'filename'},
  {title: "预览", slotName: 'img'},
  {title: "上传用户", slotName: 'user'},
  {title: "图片大小", slotName: 'size'},
  {title: "记录时间", dataIndex: 'createdAt', type: "date"},
  {title: "操作", slotName: 'action'},
]


const visible = ref(false)

function imageSuccess(fileItem: FileItem) {
  const res = fileItem.response as baseResponse<string>
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
}

const fListRef = ref()

function beforeOk() {
  fListRef.value.getList()
  return true
}


</script>

<template>
  <div class="imageListView">
    <a-modal v-model:visible="visible" title="上传图片" :on-before-ok="beforeOk">
      <a-upload
          list-type="picture-card"
          action="/api/image"
          :headers="{token: store.userInfo.token}"
          image-preview
          multiple
          @success="imageSuccess"
          name="file"
      />
    </a-modal>
    <f_list
        ref="fListRef"
        :url="imageListApi"
        add-label="上传图片"
        @add="visible = true"
        no-edit
        :columns="columns">
      <template #user="{record}:{record: imageType}">
        <span v-if="record.userID === 0">-</span>
        <f_avatar_title v-else :title="record.userNickname" :avatar="record.userAvatar"></f_avatar_title>
      </template>
      <template #img="{record}: {record: imageType}">
        <a-image :src="record.webPath" :height="50"></a-image>
      </template>
      <template #size="{record}: {record: imageType}">
        {{ bytesToSize(record.size) }}
      </template>
    </f_list>
  </div>
</template>

<style lang="less">

</style>